---
layout: ../../layouts/PageLayout.astro
title: Cache Plugin
description: How the default cache works in villus
order: 2
---

import DocTip from '@/components/DocTip.vue';

# Cache Plugin

The cache plugin is a simple in-memory cache that clears whenever the page reloads or when the client is destroyed. The cache plugin only applies it's caching logic to queries, as mutations require a fresh response from the server.

The cache plugin handles all the cache policies in villus:

- `cache-first`: If found in cache return it, otherwise fetch it from the network
- `network-only`: Always fetch from the network and do not cache it
- `cache-and-network`: If found in cache return it, then fetch a fresh result from the network and update current data (reactive). if not found in cache it will fetch it from the network and cache it
- `cache-only`: If found in cache return it, otherwise returns an empty response without errors

```vue
<script setup>
import { useClient, cache, fetch } from 'villus';

useClient({
  use: [cache(), fetch()],
});
</script>
```

<DocTip>

The cache plugin is one of the default plugins that are pre-configured with any villus client unless specified otherwise

</DocTip>

## Options

At this moment the cache plugin doesn't have any options to customize

## Clearing cache

You can clear the cache for all queries using `clearCache()` present on the cachePlugin instance. You can export the cache plugin to make it accessible to other parts of your code like so:

```ts
import { useClient, cache, fetch } from 'villus';

export const cachePlugin = cache();

useClient({
  use: [cachePlugin, fetch()],
});
```

Then you can import it and clear it whenever it makes sense in your logic:

```ts
import { cachePlugin } from '../client';

// anywhere in your code
cachePlugin.clearCache();
```

## Code

You can check the [source code for the `cache` plugin](https://github.com/logaretm/villus/blob/main/packages/villus/src/cache.ts) and use it as a reference to build your own
